<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 鼠标经过轮播图时 按钮的显示和隐藏
        // 获取事件源
        var focus = document.querySelector('.focus');
        var arrowL = document.querySelector('.arrow-l');
        var arrowR = document.querySelector('.arrow-r');
        var ol = document.querySelector('.circle');
        var ul = focus.querySelector('ul');
        var focusWidth = focus.offsetWidth;
        focus.addEventListener('mouseenter', function () {
            arrowL.style.display = 'block';
            arrowR.style.display = 'block';
            clearInterval(carousel);
            carousel = null;
        })
        focus.addEventListener('mouseleave', function () {
            arrowL.style.display = 'none';
            arrowR.style.display = 'none';
            // 鼠标离开 自动轮播
            carousel = setInterval(function () {
                arrowR.click();
            }, 3000)
        })
        // 2.点击圆点部分
        // 圆点的个数应该是与图片的个数是一致的，所以 应该根据ul中的li的个数动态创建圆点的个数
        // js需要写的具有一定的动态性 改变结构 时 js可以动态生成
        for (var i = 0; i < ul.children.length; i++) {
            // (1)创建圆点 
            var li = document.createElement('li');
            // (2)添加到ol中
            ol.appendChild(li);
            // 设置一个变量 用来记录当前圆点的索引号 后面与图片位置对应显示
            li.setAttribute('index', i);
            // (3).点击圆点的事件效果 应该在创建之后就绑定事件
            li.addEventListener('click', function () {
                // (4).被点击的圆点 变成当前状态
                // 干掉所有人 ol.children.length所有小圆点的个数
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                // 留下我自己 当前点击的圆点
                this.className = 'current';

                // (5). 点击时图片轮播
                // 获得当前圆点的索引号
                var currentIndex = this.getAttribute('index');
                // 轮播到哪个li 把当前图片对应的圆点的索引号 给点击的次数
                // 是保持圆点 按钮点击次数 图片对应一致
                clickCount = currentIndex;
                circleMove = currentIndex;

                // ul移动的距离  圆点索引号*焦点图的宽度
                animate(ul, -currentIndex * focusWidth);

            })
        }

        // 默认设置第一个圆点为当前
        ol.children[0].className = 'current';
        // 无缝轮播：把ul中的图片复制一份到ul的最后。当用户点击到最后一张，就是我们的倒数第二张
        // 用户再点击时 看到的是第一张的图片 其实是我们复制了第一张到ul的最后，所以用户看到的实际上是我们复制的那一张图
        // 这时当用户再点击时  我们迅速把ul移回原位left=0，从头开始 再按照正常的轮播到第二张


        // 克隆节点在创建小圆点的后面 因为克隆出来的节点不需要小圆点
        // 复制ul第一个li放到最后 ul.children[0].cloneNode(true)深拷贝
        var firstImg = ul.children[0].cloneNode(true);
        ul.appendChild(firstImg);
        // 点击按钮事件
        // 点击右侧按钮 图片向左轮播 点击一次 图片(ul)移动一个图片的距离
        // ul移动的距离 = 点击次数*焦点图的宽度  与上面点小圆点的效果类似
        // 设置一个变量记录 点击的次数  点击一次图片滚动一次
        var clickCount = 0;
        // 记录圆点的位置 控制圆点的播放
        var circleMove = 0;
        // 节流阈值：为了防止点击过快图片没有轮播完就结束的情况
        var flag = true;
        // 3.右侧按钮点击
        arrowR.addEventListener('click', function () {
            if (flag) {
                // 先锁住函数 当动画执行完毕之后 再解锁
                flag = false; // 关闭节流阀
                // (1) 当ul走到最后 我们复制的那一张图片时：ul的left = 0；迅速复原ul
                if (clickCount == ul.children.length - 1) {
                    ul.style.left = 0;
                    clickCount = 0; // 点击置0
                }

                clickCount++;
                animate(ul, -clickCount * focusWidth, function () {
                    flag = true; // 打开节流阀
                });

                // (2) 图片轮播时 圆点也在变化
                circleMove++;
                // 当圆点到最后一个4 也就是图片轮播到我们复制的哪一个图片时  圆点从头开始
                if (circleMove == ol.children.length) {
                    circleMove = 0
                }
                // circleMove == ol.children.length - 1 ? 0 : circleMove;
                // 调用函数 排他思想
                circleVisible();
            }


        })

        // 4.左侧按钮点击
        arrowL.addEventListener('click', function () {
            if (flag) {
                flag = false;
                // (1) 当ul是第一张图片时 点击时应轮播到倒数第二张 
                if (clickCount == 0) {
                    ul.style.left = -clickCount * focusWidth + 'px';
                    clickCount = ul.children.length - 1; // 点击数也回到图片对应的点击数
                }
                clickCount--;
                animate(ul, -clickCount * focusWidth, function () {
                    flag = true;
                });

                // (2) 图片轮播时 圆点也在变化
                circleMove--;
                // 点击时 如果 circleMove < 0 说明是第一张图片 小圆点要从第4个开始 (索引号3)
                if (circleMove < 0) {
                    circleMove = ol.children.length - 1
                }
                // circleMove < 0 ? ol.children.length - 1 : circleMove;
                // 调用函数 排他思想
                circleVisible();
            }
        })

        // 5.鼠标经过时  设置定时器 自动轮播图片
        // 自动轮播的效果 与点击右侧按钮的效果一样
        // 即可以使用手动调取 右侧按钮点击事件
        var carousel = setInterval(function autoCarousel() {
            arrowR.click();
        }, 3000)

        // 排他
        function circleVisible() {
            // 干掉所有人
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 留下自己
            ol.children[circleMove].className = 'current';
        }
 


    </script>
</body>

</html>